<template>
  <div class="title_div">
    <!-- 两端对齐 -->
    <van-row type="flex" justify="space-between" style="padding:0 .2rem">
      <van-col span="5">
        <img class="logo" src="../assets/logo-img.png" alt />
      </van-col>
      <van-col span="15" class="search_div" @click="searchPage">
        <van-icon name="search" size=".5rem" />
        <span>请输入用户名</span>
      </van-col>
      <van-col span="3">
        <van-button class="loginBtn" type="primary" size="mini">登录</van-button>
      </van-col>
    </van-row>
    <van-tabs v-model="tabs_active" swipeable class="tabBtnWrap">
      <van-tab v-for="(item,index) in tabBtnArr" :title="item" :key="index">
      </van-tab>
    </van-tabs>
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="(imgs,o) in swipe_imgArr" :key="o">
        <img :src="imgs" />
      </van-swipe-item>
    </van-swipe>
    <div class="indexServeicePolicy">
      <ul>
        <li>
          <i
            style="background-image: url('https://yanxuan.nosdn.127.net/a03dd909803b9ac032eba58b7253a2f6.png');background-size: 100% 100%"
          ></i> 网易自营品牌
        </li>
        <li>
          <i
            style="background-image: url('https://yanxuan.nosdn.127.net/2d0402ffcd52b3ec3b07422681c42a89.png');background-size: 100% 100%"
          ></i> 30天无忧退货
        </li>
        <li>
          <i
            style="background-image: url('https://yanxuan.nosdn.127.net/eb61ee48e8942dbd1784c9ee75ebe955.png');background-size: 100% 100%"
          ></i> 48小时快速退款
        </li>
      </ul>
    </div>
    <div class="GoodsColumn_wrap">
      <van-grid square :column-num="5">
        <van-grid-item
          v-for="(value,p) in goodsColumn_arr"
          :key="p"
          :icon="value.img_url"
          :text="value.img_txt"
        />
      </van-grid>
    </div>
    <div class="CountDownWarp">
      <p>限时购</p>
      <van-count-down :time="time_val" class="CountDownStyle">
        <template v-slot="timeData">
          <span class="time_block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="time_block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="time_block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
      <a href="#" class="right">更多>></a>
    </div>
    <div class="GoodsList_wrap">
      <van-grid square :column-num="3">
        <van-grid-item
          v-for="(value,p) in goodsListObj"
          :key="p"
          :icon="value.img_url"
          :text="value.img_txt"
        />
      </van-grid>
    </div>
    <!-- footer div -->
    <!-- <div class="footer_Div">
      <van-tabbar v-model="active" active-color="#f00" @change="tabchange">
        <van-tabbar-item>
          <span>首页</span>
          <template #icon="props">
            <div :class="props.active ? icon.a : icon.a1"></div>
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>分类</span>
          <template #icon="props">
            <div :class="props.active ? icon.b : icon.b1"></div>
          </template>
        </van-tabbar-item>

        <van-tabbar-item>
          <span>值得买</span>
          <template #icon="props">
            <div :class="props.active ? icon.c : icon.c1"></div>
          </template>
        </van-tabbar-item>

        <van-tabbar-item>
          <span>购物车</span>
          <template #icon="props">
            <div :class="props.active ? icon.d : icon.d1"></div>
          </template>
        </van-tabbar-item>

        <van-tabbar-item>
          <span>个人</span>
          <template #icon="props">
            <div :class="props.active ? icon.e : icon.e1"></div>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>-->
    <footers></footers>
  </div>
</template>

<script>
import "../assets/resetVant.css";
import axios from "axios";
import footers from "./footer_bar";
export default {
  name: "IndexWrap",
  components: {
    footers
  },
  data() {
    return {
      baseurl: process.env.VUE_APP_BASE_URL,
      time_val: 30 * 60 * 60 * 1000,
      msg: "xxx123",
      tabs_active: "",
      tabBtnArr: [],
      swipe_imgArr: [],
      goodsColumn_arr: [
        {
          img_url:
            "https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png",
          img_txt: "新品首发"
        },
        {
          img_url:
            "http://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png",
          img_txt: "居家生活"
        },
        {
          img_url:
            "https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png",
          img_txt: "服饰鞋包"
        },
        {
          img_url:
            "http://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png",
          img_txt: "美食酒水"
        },
        {
          img_url:
            "https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png",
          img_txt: "个护清洁"
        },
        {
          img_url:
            "https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png",
          img_txt: "母婴亲子"
        },
        {
          img_url:
            "https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png",
          img_txt: "运动旅行"
        },
        {
          img_url:
            "https://yanxuan.nosdn.127.net/fbca8e1f2948f0c09fc7672c2c125384.png",
          img_txt: "数码家电"
        },
        {
          img_url:
            "https://yanxuan.nosdn.127.net/f7281169d4e82d5d8d52aa1fec83fe01.png",
          img_txt: "全球特色"
        },
        {
          img_url:
            "http://yanxuan.nosdn.127.net/12e8efd15b9b210ab156a7ee9b340548.gif",
          img_txt: "好货抄底"
        }
      ],
      goodsListObj: [
        {
          img_url:
            "https://yanxuan-item.nosdn.127.net/e78096b543cc65af16da3a93cacb4071.png?quality=75&type=webp&imageView&thumbnail=216x216",
          img_txt: "￥219"
        },
        {
          img_url:
            "https://yanxuan-item.nosdn.127.net/570e762763536175b9ec226c0d93a7cd.png?quality=75&type=webp&imageView&thumbnail=216x216",
          img_txt: "￥167"
        },
        {
          img_url:
            "https://yanxuan-item.nosdn.127.net/f3f18a4fe9e7905cd7c9ff28e42ff0c2.png?quality=75&type=webp&imageView&thumbnail=216x216",
          img_txt: "￥50.2"
        },
        {
          img_url:
            "https://yanxuan-item.nosdn.127.net/0b05c22b99e8fc2cf3015e4bbb8d7c3f.png?quality=75&type=webp&imageView&thumbnail=216x216",
          img_txt: "￥139"
        },
        {
          img_url:
            "https://yanxuan-item.nosdn.127.net/ec55e5314bfd670320c3c15ce5e0b095.png?quality=75&type=webp&imageView&thumbnail=216x216",
          img_txt: "￥42.8"
        },
        {
          img_url:
            "https://yanxuan-item.nosdn.127.net/f815bf4d31ece0500089d69475c2014c.png?quality=75&type=webp&imageView&thumbnail=216x216",
          img_txt: "￥249"
        }
      ]
    };
  },
  methods: {
    tabchange(index) {
      this.$notify({ type: "primary", message: index });
      // 点击后 跳转路由
      switch (index) {
        case 1:
          this.$router.push("/cateList");
          break;
      }
    },
    searchPage() {
      this.$router.push("/searchPage");
    },
    get_list() {
      axios.get(`${this.baseurl}/get_tabBtn_list`).then(r => {
        this.tabBtnArr = r.data;
      });
    },
    get_img() {
      axios.get(`${this.baseurl}/get_swipe_img`).then(r => {
        this.swipe_imgArr = r.data;
      });
    }
  },
  mounted() {
    this.get_list();
    this.get_img();
  },
  created() {}
};
</script>

<style scoped lang="scss">
.title_div {
  padding: 0.21333rem 0;
}
.logo {
  width: 1.8rem;
  height: 0.53333rem;
  margin-top: 0.1rem;
}
.loginBtn {
  width: 0.98667rem;
  height: 0.53333rem;
  line-break: 0.53333rem;
  text-align: center;
  color: #dd1a21;
  border: 1px solid #dd1a21;
  border-radius: 0.10667rem;
  margin-left: 0.21333rem;
  font-size: 0.32rem;
  background-color: #fff;
  margin-top: 0.1rem;
}
.search_div {
  font-size: 0.377rem;
  height: 0.745rem;
  background-color: #ededed;
  border-radius: 0.10667rem;
  display: flex;
  justify-content: left;
  padding-left: 0.6rem;
  align-items: center;
}
.tabBtnWrap {
  margin-top: 0.2rem;
  font-size: 0.4rem;
  padding: 0 0.2rem;
}
.my-swipe .van-swipe-item {
  height: 4rem;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.indexServeicePolicy ul {
  // width: 100%;
  height: 0.4rem;
  padding: 0.4rem;
  display: flex;
  align-items: center;
}
.indexServeicePolicy ul li {
  flex: 1;
  float: left;
  // background: #eee;
  font-size: 0.32rem;
  color: #333;
  margin-left: 0.10667rem;
  line-height: 0.42667rem;
  display: inline-block;
  vertical-align: middle;
}

.indexServeicePolicy ul li i {
  width: 0.42667rem;
  height: 0.42667rem;
  font-size: 0.32rem;
  color: #333;
  margin-left: 0.10667rem;
  line-height: 0.42667rem;
  display: inline-block;
  vertical-align: middle;
}

.CountDownWarp {
  text-align: left;
  height: 1.33333rem;
  border-top: 0.4rem solid #ecd9da;
  padding: 0.2rem 0.4rem 0 0.4rem;
  overflow: hidden;
}
.CountDownWarp p {
  font-size: 0.42667rem;
  float: left;
}

.CountDownWarp .right {
  float: right;
  font-size: 0.37333rem;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.time_block {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  color: #fff;
  font-size: 0.32rem;
  text-align: center;
  background-color: #000;
  border-radius: 0.053333rem;
  line-height: 0.48rem;
}
.CountDownStyle {
  float: left;
  margin: 7px 0 0 12px;
}
.colon {
  font-size: 0.4rem;
  color: #ee0a24;
  font-weight: 700;
}
</style>
